import { merge } from 'lodash-es';
import store from '@/store/index.js';
let sideTheme = store.state.global.setting.sideTheme ?? 'theme-dark';
const options = {
  grid: {
    bottom: '10%',
    top: '16%',
    left: '5%',
    right: '5%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    borderWidth: '0', //边框宽度设置1
    axisPointer: {
      type: 'shadow',
      shadowStyle: { color: 'rgba(220, 220, 220, 0.1)' },
    },
  },
  legend: {
    x: 'center',
    y: 'top',
    padding: [20, 25],
    itemWidth: 10,
    itemHeight: 4,
  },
  xAxis: {
    type: 'category',
    triggerEvent: true,
    axisLine: {
      show: false,
      lineStyle: { color: '#c8d0d7' },
    },
    axisTick: { show: false },
    axisLabel: { color: '#7d8292' },
  },
  yAxis: {
    type: 'value',
    name: '',
    nameTextStyle: { color: '#7f889a' },
    padding: 5,
    alignTicks: true,
    splitLine: {
      show: false,
      lineStyle: {
        color: 'rgba(127, 136, 154, 0.5)',
        type: 'dashed',
      },
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#7d8292',
      },
    },
    axisLabel: {
      show: true,
      margin: 10,
      color: '#7f889a',
    },
  },
};
store.watch(
  state => state.global.setting.sideTheme,
  newVal => (sideTheme = newVal),
);

const getCurrentThemeStyle = sideTheme => {
  return {
    tooltip: {
      backgroundColor: sideTheme === 'theme-dark' ? 'rgba(47,59,96,0.94)' : '#fff',
      borderColor: sideTheme === 'theme-dark' ? '#245288' : '#d5d5d5', //设置边框颜色
      textStyle: { color: sideTheme === 'theme-dark' ? '#f5f5f5' : '#303133' },
    },
    legend: {
      textStyle: { color: sideTheme === 'theme-dark' ? '#c0c4cc' : '#606266' },
    },
    title: {
      textStyle: { color: sideTheme === 'theme-dark' ? '#f5f5f5' : '#303133' },
    },
  };
};
export default () => merge({}, options, getCurrentThemeStyle(sideTheme));
